<!DOCTYPE html>
<html>
<head>
<title>Nginx实时访问量</title>
    <meta charset="utf-8">
<link href="/webjars/bootstrap/3.3.6/css/bootstrap.min.css"
	rel="stylesheet">
<script src="echarts.min.js"></script>
<script src="/webjars/jquery/2.2.4/jquery.min.js"></script>
<script src="/webjars/sockjs-client/1.1.2/sockjs.min.js"></script>
<script src="/webjars/stomp-websocket/2.3.3-1/stomp.min.js"></script>
<script src="realtime.js"></script>
</head>
<body>
	<noscript>
		<h2 style="color: #ff0000">Seems your browser doesn't support
			Javascript! Websocket relies on Javascript being enabled. Please
			enable Javascript and reload this page!</h2>
	</noscript>
	<div id="main-content" class="container">
		<div class="row">
			<div class="col-md-12">
				<div id="myChart" style="width: 100%;height:500px;"></div>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
			<h4>每秒访问量超过预警值列表</h4>
			</div>
			<div class="col-md-12">
				<table class="table table-striped" id="warnTable">
					<thead>
						<tr>
						  <th >时间</th>
						  <th >访问数量</th>
						</tr>
					</thead>
					<tbody></tbody>
				</table>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">

	var realDatas = [];
	$.getJSON("/access/log/realtime", function(result) {
		$.each(result, function(i, realdata) {
			realDatas.push(transData(realdata));
		});
	});
	$.getJSON("/access/log/warn", function(result) {
		$.each(result, function(i, warndata) {
			showWarnData(warndata);
		});
	});
	var myChart = echarts.init(document.getElementById('myChart'));
	option = {
		title : {
			text : 'Nginx实时监控：每秒访问量'
		},
		tooltip : {
			trigger : 'axis',
			formatter : function(params) {
				params = params[0];
				var date = new Date(params.name);
				return date.getDate() + '/' + (date.getMonth() + 1) + '/'
						+ date.getFullYear() + ' : ' + params.value[1];
			},
			axisPointer : {
				animation : false
			}
		},
		xAxis : {
			type : 'time',
			splitLine : {
				show : false
			}
		},
		yAxis : {
			type : 'value',
			boundaryGap : [ 0, '100%' ],
			splitLine : {
				show : false
			}
		},
		series : [ {
			name : '模拟数据',
			type : 'line',
			showSymbol : false,
			hoverAnimation : false,
			data : realDatas
		} ]
	};
	myChart.setOption(option);
</script>
</html>